<!--
 * @Author: dengyl
 * @Date: 2022-01-14 10:24:10
 * @LastEditTime: 2022-08-11 15:16:33
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 头条图片+列表展示组件categoryList
 * @FilePath: \code\ctp-static-portal-front\src\components\news\components\pic-list.vue
-->
<template>
  <div
    class="news-pic-list"
    :style="{
      height: contentHeight + 'px',
      background: options.backgroundColor
    }"
  >
    <div class="container" :class="{ isColumn }">
      <!-- 左边头条图片区 -->
      <div
        class="left-side image-view cover"
        v-if="imgData.link"
        :style="`height:${contentHeight}px`"
      >
        <a :href="`${newsBasePath}${imgData.link}`" target="_blank">
          <ShowImg :key="imgData.link" :item="imgData" />
          <div class="img-mask">{{ imgData.subject ? imgData.subject : imgData.title }}</div>
        </a>
      </div>
      <!-- 右边列表区 -->
      <div class="right-side">
        <ul v-if="categoryList.length" class="tab-list">
          <li
            v-for="(item, index) in categoryList"
            :key="item.categoryId"
            :class="{ isSelected: index === selectedIndex }"
            @click="categoryChange(index)"
          >
            {{ item.categoryTitle }}
          </li>
        </ul>
        <ul class="content-list">
          <li v-for="(item, index) in dataList" :key="index">
            <div class="list-left">
              <a :href="`${newsBasePath}${item.link}`" target="_blank">{{ item.subject }}</a>
            </div>
            <div v-if="options.rowList.includes('publishDate')" class="list-right">
              <span>{{ item.createDate.split(' ')[0] }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import { methods } from '@/utils';
  import { getListCount } from '@/components/helper';
  export default {
    name: 'PicList',
    props: {
      sectionData: { type: Object },
      contentWidth: {
        type: Number,
        default: 0
      },
      list: {
        type: Array
      },
      sectionStyle: {
        type: Object
      },
      categoryList: {
        type: Array
      }
    },
    data() {
      return {
        newsBasePath: `${_basePath}/`,
        dataList: [],
        imgData: null,
        options: {},
        selectedIndex: 0,
        cacheData: {},
        contentHeight: 0,
        //是否纵向排列
        isColumn: this.contentWidth <= 480,
        count: 0
      };
    },
    created() {
      this.options = this.sectionData.options;
      this.contentHeight = methods.getContentHeight(this.options);
      this.count = getListCount(this.contentHeight, this.sectionStyle.sectionBodyLineHeight);
      //有子栏目
      if (this.categoryList.length) {
        this.setData();
        this.imgData = this.categoryList[0];
      } else {
        const list = this.list.slice();
        this.imgData = list.splice(0, 1)[0];
        this.dataList = list;
      }
    },
    methods: {
      /**
       * @description: 切换栏目
       * @param {*} index 切换的索引
       * @return {*}
       */
      categoryChange(index) {
        this.selectedIndex = index;
        this.imgData = this.categoryList[index];
        this.setData(index);
      },
      /**
       * @description: 设置当前展示的数据
       * @param {Number} selectedIndex 栏目索引
       * @return {*}
       */
      setData(selectedIndex = 0) {
        if (!this.list) return;
        const { categoryId } = this.categoryList[selectedIndex];
        //已经点过，就重新设置
        if (!this.cacheData[categoryId]) {
          this.cacheData[categoryId] = this.list.filter((d) => d.typeId === categoryId);
        }
        this.dataList = this.cacheData[categoryId].slice(0, this.count);
      }
    }
  };
</script>
<style lang="scss" scoped>
  .news-pic-list {
    overflow: auto;

    .container {
      height: 100%;
      min-width: 800px;
      // width: 101%;
      overflow: hidden;

      .left-side {
        position: relative;
        float: left;
        width: 360px;
        overflow: hidden;
        border-radius: 6px;

        a {
          display: block;
          width: 100%;
          height: 100%;
          opacity: 0.9;

          &:hover {
            opacity: 1;
          }

          .img-mask {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 35px;
            padding-left: 10px;
            font-size: 14px;
            line-height: 35px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.5);
            filter: progid:dximagetransform.microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
          }
        }
      }

      .right-side {
        height: 100%;
        padding-left: 20px;
        margin-left: 360px;
        overflow: auto;

        > .tab-list {
          overflow: hidden;

          > li {
            float: left;
            height: 30px;
            padding: 0 10px;
            line-height: 30px;
            list-style-type: none;
            cursor: pointer;

            &.isSelected {
              border-bottom: 3px solid #3892ee;
            }
          }
        }

        > .content-list {
          padding-left: 0;
          margin: 0;
          list-style: none;

          li {
            height: 30px;
            font-size: 14px;
            line-height: 30px;

            .list-left {
              float: left;
              width: 70%;
              height: 100%;

              a {
                display: inline-block;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;

                &:hover {
                  color: #2490f8;
                }
              }
            }

            .list-right {
              float: right;
              height: 100%;
              font-size: 12px;
              color: #999;
            }
          }
        }
      }

      &.isColumn {
        height: auto;
        min-width: 0;

        .left-side {
          float: none;
          width: 100%;
        }

        .right-side {
          height: auto;
          padding-left: 0;
          margin-left: 0;
          overflow: visible;
        }
      }
    }

    &::-webkit-scrollbar {
      /* 滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1） */
      width: 4px;
      height: 4px;
    }

    &::-webkit-scrollbar-button {
      /* 滚动条两端的按钮（位置2） */
      display: none;
    }

    &::-webkit-scrollbar-track-piece {
      /* 内层轨道，滚动条中间部分（位置4） */
      width: 8px;
      background-color: #f5f5f5;
      border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb {
      /* 滚动条里面可以拖动的那部分（位置5） */
      height: 50px;
      background: #bec7d5;
      border-radius: 6px;
    }
  }

  /*
.clearfix:after,
.clearfix:before {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
*/
</style>
